<script setup>

// 导入ref。ref 是 Vue 3 组合式 API 中的一个核心函数，用于创建响应式数据。响应式数据意味着当数据发生变化时，Vue 会自动更新与之绑定的 DOM 元素，实现数据和视图的自动同步。
import { ref } from 'vue'

// ref 函数接收一个初始值作为参数，这里传入的是 0，表示计数器的初始值为 0。
// ref 返回一个响应式对象，这个对象有一个特殊的 value 属性，实际的数据就存储在 value 属性中。
// 也就是说，count 本质上是一个包含 value 属性的对象，要访问或修改 count 的值，需要通过 count.value。
const count = ref(0)


// 普通的 JavaScript 函数，用于增加计数器的值。
// count.value++ 是 JavaScript 的自增操作符，它会将 count.value 的值加 1。
// 由于 count 是响应式的，当 count.value 的值发生变化时，Vue 会自动更新所有依赖于 count 的 DOM 元素。
function increment() {
  count.value++
}
</script>

<template>
  <!-- @ 是 v-on 指令的缩写，v-on 指令用于监听 DOM 事件。这里的 @click 表示监听按钮的点击事件。 -->
  <!-- 当按钮被点击时，会执行 @click 后面的表达式，即调用 increment 函数，从而使计数器的值加 1。 -->
  <button @click="increment">
    <!-- 这是 Vue 的插值表达式，双大括号 {{ }} 用于将 JavaScript 表达式的值渲染到 DOM 中。 -->
    <!-- Vue 会在模板中自动对 ref 对象进行解包操作。这样在模板里使用 ref 变量时，就无需每次都写 .value -->
    {{ count }}
  </button>
</template>